<template>
  <el-dialog v-model="visible" title="楼盘选择">
    <div>
      <el-input v-model="initParams.name" class="w-150px" placeholder="请输入楼盘名字"></el-input>
    </div>
    <div class="flex flex-row flex-wrap">
      <el-tag
        type="info"
        v-for="p in louPanConfig.list"
        :key="p.id"
        @click="insertCard(p)"
        class="cursor-pointer mr-10px mt-10px"
        >{{ p.name }}</el-tag
      >
    </div>
    <div class="mt-30px flex flex-row justify-end">
      <el-pagination
        small
        background
        layout="prev,pager,next,total"
        :total="louPanConfig.total"
        :default-current-page="initParams.pageNum"
        :page-size="initParams.pageSize"
        @current-change="pageChange"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { onBeforeMount, reactive, ref, watch } from "vue";
import { getLouPanList as getLouPanListApi } from "@/api/modules/loupan";
const visible = ref(false);

const emits = defineEmits(["card"]);

const acceptParams = () => {
  visible.value = true;
};

const initParams = reactive({ pageSize: 30, pageNum: 1, name: "", isAudit: 0, status: 0, grounding: 0 });

watch(
  () => initParams,
  () => {
    getLouPanList();
  },
  { deep: true }
);

const louPanConfig = ref();

const getLouPanList = async () => {
  const { data } = await getLouPanListApi(initParams);
  const newData = data as any;
  louPanConfig.value = newData;
};

onBeforeMount(() => {
  Promise.all([getLouPanList()]);
});

const pageChange = (val: number) => {
  initParams.pageNum = val;
};

const insertCard = (p: any) => {
  emits("card", p);
  visible.value = false;
};

defineExpose({ acceptParams });
</script>

<style></style>
